<template>
  <div>
    <jxf-titletip :title="title"></jxf-titletip>
    <el-card class="mt20">
      <el-form :inline="true" :model="searchInfo" ref="searchInfo">
        <el-form-item label="商户账号:" prop="telphone">
          <el-input ref="telphone" clearable v-model="searchInfo.telphone"
                    @keyup.enter.native="$refs['userName'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="商户名称:" prop="userName">
          <el-input ref="userName" clearable v-model="searchInfo.userName"
                    @keyup.enter.native="$refs['userType'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="商户角色:" prop="userType">
          <el-select ref="userType" v-model="searchInfo.userType" clearable placeholder="全部">
            <el-option v-for="item in userTypeList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同状态:" prop="contractStatus">
          <el-select ref="contractStatus" v-model="searchInfo.contractStatus" clearable placeholder="全部">
            <el-option v-for="item in contractStatusList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <jxf-Date :startTime.sync="searchInfo.contractStartTime1" :endTime.sync="searchInfo.contractStartTime2"
                  label="合同发起时间："></jxf-Date>
        <jxf-Date :startTime.sync="searchInfo.contractSignTime1" :endTime.sync="searchInfo.contractSignTime2"
                  label="合同签订时间："></jxf-Date>
        <el-form-item>
          <el-button type="primary" @click="onSearch()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header" class="clearfix">
        <span>数据列表</span>
        <div>
          <el-button type="primary" @click="exportInfo" :loading="isSuccess">导出</el-button>
        </div>
      </div>
      <jxf-table class="" :table="tableInfo">
        <template slot="userType" slot-scope="scope">
          <span>{{scope.row.userType === 3 ? "供应商" : scope.row.userType === 4 ? "采购商" : ''}}</span>
        </template>
        <template slot="signType" slot-scope="scope">
          <span>{{scope.row.signType === 1 ? "入驻" : scope.row.signType === 2 ? "申请信用" : scope.row.signType === 3 ? "信用支付" : ''}}</span>
        </template>
        <template slot="contractStatus" slot-scope="scope">
          <span>{{scope.row.contractStatus === 1 ? "成功" : scope.row.contractStatus === 2 ? "签订中" : scope.row.contractStatus === 3 ? "失败" : scope.row.contractStatus === 4 ? "待签署" : ''}}</span>
        </template>
        <template slot="operation" slot-scope="scope">

          <a v-if="scope.row.contractStatus === 1" :href="scope.row.url" target="_blank"><span class="c-base">查看合同</span></a>
          <el-button v-if="scope.row.contractStatus === 3" class="c-red" type="text" @click="resign(scope.row)" :loading="isResigning">重新签订</el-button>
        </template>
      </jxf-table>
    </el-card>
    <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                    @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'

  export default {
    name: "ElectronicContract",
    data() {
      return {
        title: "电子合同管理",
        contractStatusList:[{
          label: "成功",
          value: 1
        }, {
          label: "签订中",
          value: 2
        }, {
          label: "失败",
          value: 3
        }, {
          label: "待签署",
          value: 4
        }],
        isSuccess: false,
        userTypeList:[{
          label: "供应商",
          value: 3
        }, {
          label: "采购商",
          value: 4
        }],
        searchInfoBack: {
          userName: "",
          telphone: "",
          userType: null,
          contractStatus: null,
          contractStartTime1: "",
          contractStartTime2: "",
          contractSignTime1: "",
          contractSignTime2: ""
        },
        searchInfo: {
          userName: "",
          telphone: "",
          userType: null,
          contractStatus: null,
          contractStartTime1: "",
          contractStartTime2: "",
          contractSignTime1: "",
          contractSignTime2: ""
        },
        tableInfo: {},
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        isShowDetail: false,
        isResigning:false
      }
    },
    methods: {
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '编号',
              width: '190',
              prop: 'serialNumber'
            },
            {
              id: '2',
              label: '商户名称',
              prop: 'userName'
            },
            {
              id: '3',
              label: '商户账号',
              prop: 'telphone'
            },
            {
              id: '4',
              label: '商户角色',
              show: 'template',
              prop: 'userType'
            },
            {
              id: '5',
              label: '签约事项',
              prop: 'signType',
              show: 'template'
            },
            {
              id: '6',
              label: '合同状态',
              prop: 'contractStatus',
              show: 'template'
            },
            {
              id: '7',
              width: '160',
              label: '合同发起时间',
              prop: 'contractStartTime'
            },
            {
              id: '8',
              width: '160',
              label: '合同签订时间',
              prop: 'contractSignTime'
            },
            {
              id: '9',
              label: '操作',
              show: 'template',
              width: "100",
              prop: 'operation',
              fixed: "right"
            }
          ],
          data: []
        }
      },
      getList() {
        let info = formatData.clearObjEmptyPrama({
          ...this.searchInfo,
          pageSize: this.pageSize,
          pageNum: this.currentPage
        })
        ajax.post(apis.user.getSignUserInfoList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      // 列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            userId: item.userId,
            serialNumber: item.serialNumber,
            userName: item.userName,
            telphone: item.telphone,
            userType: item.userType,
            signType: item.signType,
            contractStatus: item.contractStatus,
            url: item.url,
            // contractStartTime: item.contractStartTime && item.contractStartTime !== null ? formatDate.timeFormat(item.contractStartTime) : '',
            // contractSignTime: item.contractSignTime && item.contractSignTime !== null ? formatDate.timeFormat(item.contractSignTime) :''
            contractStartTime: item.contractStartTime,
            contractSignTime: item.contractSignTime
          }
        })
      },

      // 导出
      exportInfo() {
        this.isSuccess = true;
        let info = formatData.clearObjEmptyPrama({
          ...this.searchInfo,
          pageSize: this.pageSize,
          pageNum: this.currentPage
        })
        ajax.export(apis.user.exportSignUserInfoList, info)
          .then(res => {
            this.isSuccess = false;
          }).catch(res => {
          this.$message({
            type: "error",
            message: res.message
          })
        })
      },
      // 查看详情
      resign(row) {
        this.$confirm('确定要重新签订合同', '提示', {
          type: 'warning'
        }).then(() => {
          this.isResigning = true
          ajax.post(apis.user.toESign, {signType: row.signType, userId: row.userId})
            .then(res => {
              if (res.success === true) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
                this.getList()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                });
              }
              this.isResigning = false
            })
        }).catch(() => {
        })
      },
      onSearch() {
        this.currentPage = 1
        this.getList()
      },
      // 搜索表单重置
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.searchInfo = {...this.searchInfoBack}
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.searchInfo = {...this.searchInfoBack}
        this.getList()
      }
    },
    created() {
      this.init()
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>

</style>
